import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Icon } from 'antd'
import classNames from 'classnames'
import styles from './Login.less'

const FormItem = Form.Item

const isDev = process.env.NODE_ENV === 'development'

class Login extends Component {
  static propTypes = {
    className: PropTypes.string,
    onSubmit: PropTypes.func,
  }

  static defaultProps = {
    className: '',
    onSubmit: () => {
    },
  }

  state = {}

  handleSubmit = (e) => {
    e.preventDefault()
    const {form, onSubmit} = this.props
    form.validateFields((err, values) => {
      if (err) return
      onSubmit(err, values)
    })
  }

  renderFormItem = (options) => {
    const {form} = this.props
    const {getFieldDecorator} = form
    const {key, message, icon, value} = options
    return (
      <FormItem>
        {getFieldDecorator(key, {
          initialValue: value,
          rules: [
            {required: true, message},
          ],
        })(
          <Input
            size='large'
            prefix={<Icon type={icon} className={styles.prefixIcon} />}
            placeholder={message}
          />,
        )}
      </FormItem>
    )
  }

  render() {
    const {className, children} = this.props
    const username = isDev ? 'wtwei' : ''
    const password = isDev ? 123456 : ''
    return (
      <div className={classNames(className, styles.login)}>
        <h2 className='title'>欢迎登陆幻熊云仓管理系统</h2>
        <Form onSubmit={this.handleSubmit}>
          {this.renderFormItem({key: 'username', message: '请输入账号', icon: 'user', value: username})}
          {this.renderFormItem({key: 'password', message: '请输入密码', icon: 'lock', value: password})}
          {children}
        </Form>
      </div>
    )
  }
}

export default Form.create()(Login)
